// 封装grapesjs的初始化逻辑
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
import "grapesjs-preset-webpage";
import "grapesjs-mjml";
import { BasicBlockManager } from "./bm-Basic"
import { HomePageBlockManager } from "./bm-HomePage"
import { LiveStreamingBlockManager } from "./bm-LiveStreaming"
import { ProductCenterBlockManager } from "./bm-ProductCenter"
import { NewsBlockManager } from "./bm-News"
import { InputDataBlockManager } from './bm-InputData'
import { PictureBlockManager } from './bm-Picture'
import { ModuleBlockManager } from "./bm-module";
import { ColumnBlockManager } from "./bm-column";
import { OtherBlockManager } from "./bm-other";

const clearLocalStorage = () => {
  localStorage.removeItem("gjs-components");
  localStorage.removeItem("gjs-styles");
  localStorage.removeItem("gjs-html");
  localStorage.removeItem("gjs-css");
};

export const initializeGrapesJS = (
  containerId,
  blocksContainerId,
  panelsContainerId
) => {
  // clearLocalStorage(); // 清理旧的存储数据 
  const customType = (editor) => {
    editor.StyleManager.addType('my-custom-prop', {
      // 自定义样式版ui
      create({ props, change }) {
        const el = document.createElement('div');
        el.innerHTML = `<input type="range" class="my-input" min="${props.min}" max="${props.max}"/>`;
        const inputEl = el.querySelector('.my-input');
        inputEl.addEventListener('change', event => change({ event })); //触发更新函数
        inputEl.addEventListener('input', event => change({ event, partial: true }));
        return el;
      },
      emit({ updateStyle }, { event, partial }) {
        const { value } = event.target;
        updateStyle(`${value}%`, { partial });
      },
      update({ value, el }) { el.querySelector('.my-input').value = parseInt(value, 10); },
      destroy() { },
    });
  };
  const editor = grapesjs.init({
    container: `#${containerId}`,
    fromElement: true,
    height: "900px",
    width: "100%",
    plugins: [customType],
    storageManager: {
      autoload: 0,
    },
    styleManager: {
      sectors: [
        {
          name: "General",
          open: false,
          buildProps: [
            "float",
            "display",
            "position",
            "top",
            "right",
            "left",
            "bottom",
          ],
        },
        {
          name: "Flex",
          open: false,
          buildProps: [
            "flex-direction",
            "flex-wrap",
            "justify-content",
            "align-items",
            "align-content",
            "order",
            "flex-basis",
            "flex-grow",
            "flex-shrink",
            "align-self",
          ],
        },
        {
          name: "Dimension",
          open: false,
          buildProps: [
            "width",
            "height",
            "max-width",
            "min-height",
            "margin",
            "padding",
          ],
        },
        {
          name: "Typography",
          open: false,
          buildProps: [
            "font-family",
            "font-size",
            "font-weight",
            "letter-spacing",
            "color",
            "line-height",
            "text-shadow",
          ],
        },
        {
          name: "Decorations",
          open: false,
          buildProps: [
            "border-radius-c",
            "background-color",
            "border-radius",
            "border",
            "box-shadow",
            "background",
          ],
        },
        {
          name: "Extra",
          open: false,
          buildProps: ["transition", "perspective", "transform"],
        },
        ,
        {
          name: '设置组件宽',
          open: false,
          properties: [{
            type: 'my-custom-prop',
            property: 'width',
            default: '50',
            min: 1,
            max: 100,
          },],
        },
      ],
    },
    panelManager: {
      appendTo: `#${panelsContainerId}`,
      panels: [
        {
          id: "panel-top",
          el: ".panel__top",
          buttons: [
            {
              id: "visibility",
              active: true,
              className: "btn-toggle-borders",
              label: "<u>B</u>",
              command: "sw-visibility",
            },
          ],
        },
      ],
    },
  });
  editor.setDragMode("translate");//设置可随意拖动，方便自定义位置

  // ------------------------------------------------------------------------------------------------------------
  /*
      基本组件的BlockManager
  */
  BasicBlockManager(editor)

  // ------------------------------------------------------------------------------------------------------------
  /*
      首页组件的BlockManager
  */
  HomePageBlockManager(editor)

  // ------------------------------------------------------------------------------------------------------------
  /*
    产品中心组件的BlockManager
  */
  ProductCenterBlockManager(editor)

  // ------------------------------------------------------------------------------------------------------------
  /*
      直播组件的BlockManager
  */
  LiveStreamingBlockManager(editor)

  // ------------------------------------------------------------------------------------------------------------
  /*
      新闻组件的BlockManager
  */
  NewsBlockManager(editor)

  // ------------------------------------------------------------------------------------------------------------
  /*
      组件类的BlockManager
  */
  ModuleBlockManager(editor)
  // ------------------------------------------------------------------------------------------------------------
  /*
      栏目类的BlockManager
  */
  ColumnBlockManager(editor);

  /*
      输入数据类型的BlockManager
  */
  InputDataBlockManager(editor);

  /*
      输入图片类的BlockManager
  */
  PictureBlockManager(editor);
  /*
      输入其他类类的BlockManager
  */
  OtherBlockManager(editor);

  // ------------------------------------------------------------------------------------------------------------
  /*
    剩余的没有分组的BlockManager可以直接添加进来
  */

  return editor;
};
